<template>
    <div
        class="box"
        :style="{
            'margin-bottom': props.options
                ? props.options.space
                    ? props.options.space * 2 + 'rpx'
                    : 0 + 'rpx'
                : 0 + 'rpx'
        }">
        <div v-if="props.options.tabs == 1 && props.options.imgList.length == 1 && !props.options.imgList[0].imgurl">
            <scroll-view class="scroll-view_H" :scroll-x="true" @scroll="scroll">
                <view class="scroll-view-item_H" v-for="item in num" :key="item">
                    <view class="item">
                        <img src="../../assets/mall/category.png" class="img" />
                        <text class="text">分类导航{{ item }}</text>
                    </view>
                </view>
            </scroll-view>
        </div>
        <div v-if="props.options.tabs == 1 && (props.options.imgList.length > 1 || props.options.imgList[0].imgurl)">
            <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
                <view
                    class="scroll-view-item_H"
                    v-for="(item, index) in props.options.imgList"
                    :key="item"
                    @click="jump(item)">
                    <div class="item" v-if="item.imgurl">
                        <image webp :src="getOssImg(item.imgurl)" class="img" mode="aspectFill" />
                        <span class="text">{{ item.name }}</span>
                    </div>
                    <div class="item" v-else>
                        <img src="../../assets/mall/category.png" class="img" />
                        <span class="text">分类导航{{ index + 1 }}</span>
                    </div>
                </view>
            </scroll-view>
        </div>
        <div v-if="props.options.tabs == 2 && props.options.imgList.length == 1 && !props.options.imgList[0].imgurl">
            <scroll-view class="scroll-view_H" :scroll-x="true" @scroll="scroll">
                <view class="scroll-view-item-content" v-for="item in num" :key="item">
                    <view class="item">
                        <img src="../../assets/mall/category.png" class="img" />
                        <text class="text">分类导航{{ item }}</text>
                    </view>
                </view>
            </scroll-view>
        </div>
        <div v-if="props.options.tabs == 2 && (props.options.imgList.length > 1 || props.options.imgList[0].imgurl)">
            <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
                <view
                    class="scroll-view-item-content"
                    v-for="(item, index) in props.options.imgList"
                    :key="item"
                    @click="jump(item)">
                    <div class="item" v-if="item.imgurl">
                        <image webp :src="getOssImg(item.imgurl)" class="img" mode="aspectFill" />
                        <span class="text">{{ item.name }}</span>
                    </div>
                    <div class="item" v-else>
                        <img src="../../assets/mall/category.png" class="img" />
                        <span class="text">分类导航{{ index + 1 }}</span>
                    </div>
                </view>
            </scroll-view>
        </div>
    </div>
</template>
<script setup name="category">
import { ref, watch } from 'vue';
import { getOssImg } from '../../commons/utils.js';
const emit = defineEmits(['jump']);
const num = ref(5);
let props = defineProps({
    options: {
        type: Object,
        default: () => {
            return {};
        }
    },
    isUniapp: {
        type: Boolean,
        default: false
    }
});
const jump = item => {
    if (props.isUniapp) {
        emit('jump', item);
    }
};
</script>
<style lang="scss" scoped>
.box {
    padding: 22rpx 0;
    background: #fff;
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }

    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
    }
    .scroll-view-item {
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
        font-size: 36rpx;
    }
    .img {
        border-radius: 100%;
        width: 88rpx;
        height: 88rpx;
        margin-bottom: 24rpx;
    }
    .text {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
        line-height: 40rpx;
        margin-bottom: 12rpx;
    }
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .scroll-view-item_H {
        display: inline-block;
        width: 25%;
    }
    .scroll-view-item-content {
        display: inline-block;
        width: 20%;
    }
}
</style>
